import React from 'react';
import { Card, Row, Col, Form, Input, Button } from 'antd';
// import { nextTick } from 'utils/nextTick';

const formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};
const FormItem = Form.Item;

class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }

    renderBtn() {
        const { form, onSearch } = this.props;
        return (
          <FormItem
            {...formItemLayout}
          >
            <Button
              type="primary" 
              onClick={() => onSearch(form.getFieldsValue())}
            >搜索</Button>
            <Button
              htmlType="reset" 
              style={{ marginLeft: 20 }}
              onClick={() => {
                    form.resetFields();
                    onSearch({});
                }}
            >重置</Button>
          </FormItem>
        );
      }
    
    render(){
        const { form } = this.props;
        const { getFieldDecorator } = form;
        return (
          <Card>
            <Form layout="horizontal">
              <Row gutter={16}>
                <Col span="8">
                  <FormItem
                    label="角色名称"
                    {...formItemLayout}
                            >
                    {getFieldDecorator('name', {
                        initialValue: ''
                      })(<Input placeholder="请输入角色名称" />)
                    }
                  </FormItem>
                </Col>
                <Col span="16">
                  {this.renderBtn()}
                </Col>
              </Row>
            </Form>
          </Card>
        );
    }
}

export default Form.create({})(SearchBar);